<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('电影数据首页')"/>
</head>
<body>
    <div style="height: 15px;background-color: #fff;padding: 15px;">
        <span class="layui-breadcrumb">
            <a href="#">爬虫管理</a>
            <a><cite>电影数据</cite></a>
        </span>
    </div>
    <div style="padding: 20px;background-color:#f2f2f2 ;">
        <div class="layui-row layui-col-space13">
            <div class="layui-col-md12">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">电影名称</label>
                            <div class="layui-input-inline">
                                <input name="movieName" class="layui-input"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <a class="layui-btn layui-bg-blue" lay-submit="" lay-filter="search">
                                <i class="layui-icon layui-icon-search"></i>查询
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">电影数据列表</div>
                    <div class="layui-card-body">
                        <table id="movieTable"  lay-filter="movieTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="look"><i class="layui-icon layui-icon-location"></i>查看</a>
        <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <th:block th:include="include :: footer"/>
    <script>
        layui.use(['element','form','table','layer','jquery'],function(){
            var ele = layui.element,form = layui.form,
                table = layui.table,layer = layui.layer,
                $ = layui.jquery;

            //数据表格
            table.render({
                elem:'#movieTable',
                url:'/mc/find',
                cols:[
                    [
                        {type:'checkbox'},
                        {type:'numbers'},
                        {field:'movieName',title:'电影名称',width:150},
                        {field:'text',title:'电影内容',width:'60%'},
                        {field:'imgUrl',title:'电影海报',width:200},
                        {field:'href',title:'下载地址',width:250},
                        {fixed:'right',title:'操作',align:'center',width:210,templet:'#tool'}
                ]
                ],
                id:'movieTableId',
                page:true,
                height:'full-230'
            });

            //监听查询按钮
            form.on('submit(search)',function (data) {
                var data = data.field;//获取表单内容
                //表格重载
                table.reload('movieTableId',{
                    page:{
                        curr:1 //重载开始页数
                    },
                    where:data
                },'data');
            });

            //监听table的tool按钮
            table.on('tool(movieTable)',function (obj) {
                var event = obj.event;
                var id = obj.data.id;
                switch (event) {
                    case 'look':
                        layer.open({
                            type:2,
                            content:'/mc/look/'+id,
                            area:['700px','100%'],
                            minmax:true
                        })
                        break;
                    case 'edit':
                        layer.open({
                            type:2,
                            content:'/mc/edit/'+id,
                            area:['700px','80%'],
                            btn:['确定保存','取消关闭'],
                            btn1:function (index,ots) {
                                //获取iframe打开的子页面内容
                                var childFrame = window[ots.find('iframe')[0]['name']];
                                //调用子页面的方法
                                childFrame.submitClick();
                            }

                        })
                        break;
                    case 'remove':
                        layer.confirm('是否真的删除该条记录?',{icon:1,title:'系统警告'},function (index) {
                            $.get('/mc/remove/'+id,function (result) {
                                layer.msg(result.msg);
                                if(result.is){
                                    obj.del();
                                }
                            });
                        });
                        break;
                }
            });
        });
    </script>
</body>
</html>
